<template>
	<view>
		<view class="custom-navbar">
					<!-- 左侧部分不变 -->
					<view class="left mine-header">
					  <image src="/static/logo.png" class="icon" />
					  <text>crtpto.vom</text>
					</view>
					
					<!-- 右侧操作区 -->
					<view class="right">
						<image id="networkAddress" class="image-header" src="/static/logo.png" @click="toggleDropdown(1)"></image>
						<view class="line"></view>
						<image id="language" class="image-header" src="/static/logo.png"  @click="toggleDropdown(2)"></image>
					</view>
				</view>
				
				<!-- 下拉菜单 - 修改为使用动态定位 -->
				<view 
				  v-if="showDropdown" 
				  class="dropdown-menu"
				  :style="{
				    position: 'fixed',
				    top: `${triggerPosition.top}px`,
				    left: `${triggerPosition.left}px`,
				    width: `${menuWidth}px`,
				    maxHeight: `${maxHeight}px`,
				    zIndex: 9999
				  }"
				>
				  <view class="dropdown-arrow" :style="{ left: `${arrowPosition}px` }"></view>
				  <scroll-view scroll-y class="menu-scroll">
				    <view 
				      v-for="(item, index) in list" 
				      :key="index"
				      class="menu-item"
				      @click="selectItem(item)"
				    >
				      <text class="item-text">{{ item.label }}</text>
				    </view>
				  </scroll-view>
				</view>
		<!-- 内容 -->
		<view>
			<view class="top-title">
				<view class="big-title">用您的加密货币赚取</view>
				<view class="big-title">USDT</view>
				<view class="medium-title">持有加密货币，赚取奖励，就是这么简单。让您的加密货币为您服务。</view>
			</view>
			<button class="make-money">开始赚取</button>
			<image class="top-oneimg" src="/static/bigImg/shouji.jpeg"></image>
			<view class="top-title">
				<view class="medium-title">獎勵是一種簡單的成長方式無需額外努力即可管理您的加密貨幣持倉。開啟獎勵功能，即可獲得收益，無需鎖定期，資金隨時可用。輕鬆利用加密貨幣，實現更多收益。</view>
			</view>
			<view class="top-twoimg-flex">
				<image class="top-twoimg" mode="widthFix" src="/static/bigImg/zatu.jpeg"></image>
			</view>
			<view class="icon-btn-box">
				<view class="icon-btn">
					<image class="icon-mony" src="/static/commonImg/mony.png"></image>
					<text class="icon-title">开始赚取</text>
				</view>
			</view>
			<view class="work-way">工作原理</view>
			<view class="txt">您可以在 Crypto 或 Crypto pro 應用程式或網站上一鍵啟動獎勵功能。然後，透過啟動鏈上算力雲 AI，即可實現去中心化金融的自動化執行。當滿足條件時，操作將被觸發，從而產生穩定的收益。</view>
			<view class="workflow">
				<image class="workflow-img" src="/static/xiaotu/zant.png"></image>
				<view>
					<view class="workflow-title">總是在您的掌控之中</view>
					<view>您的資產可以隨時交易、提取或用於保證金交易**抵押，無需鎖定期。</view>
				</view>
			</view>
			<view class="workflow">
				<image class="workflow-img" src="/static/xiaotu/baifenbi.png"></image>
				<view>
					<view class="workflow-title">總是在您的掌控之中</view>
					<view>您的資產可以隨時交易、提取或用於保證金交易**抵押，無需鎖定期。</view>
				</view>
			</view>
			<view class="workflow">
				<image class="workflow-img" src="/static/xiaotu/dengdai.png"></image>
				<view>
					<view class="workflow-title">總是在您的掌控之中</view>
					<view>您的資產可以隨時交易、提取或用於保證金交易**抵押，無需鎖定期。</view>
				</view>
			</view>
			<view class="workflow">
				<image class="workflow-img" src="/static/xiaotu/shenzhi.png"></image>
				<view>
					<view class="workflow-title">總是在您的掌控之中</view>
					<view>您的資產可以隨時交易、提取或用於保證金交易**抵押，無需鎖定期。</view>
				</view>
			</view>
			<view class="img-txt-center">
				<image mode="widthFix" class="top-threeimg" src="/static/bigImg/heiren.jpeg"></image>
			</view>
			<view class="remind-txt">* 分配取決於資產類型。「選擇加入獎勵」功能僅在部分地區提供。** 受地理位置限制。</view>
			<view class="accord-with">符合條件的資產</view>
			<view class="accord-with-txt">以下列出的資產均可獲得獎勵。收益按日支付，以產生收益的相同資產形式發放。</view>
			<view class="icon-btn-box">
				<view class="icon-btn">
					<image class="icon-mony" src="/static/commonImg/mony.png"></image>
					<text class="icon-title">开始赚取</text>
				</view>
			</view>
			<view class="more">
				<view class="more-title">想要更多控制權？</view>
				<view class="more-txt">如果您需要更多進階選項，請造訪我們的專業質押頁面。您可以手動選擇每種資產的分配比例，以及使用彈性質押或綁定質押。</view>
				<view class="foot">
					<button class="foot-btn">專業質押</button>
				</view>
			</view>
			<!-- 底部小图 -->
			<view class="partners">
				<view class="name">Partners</view>
				<view class="image-container">
				    <image 
				      v-for="(img, index) in imgList" 
				      :key="index" 
				      :src="img" 
				      mode="widthFix" 
				      class="image-item"
				    />
				  </view>
			</view>
			
		</view>
		
		
		
	</view>
</template>

<script>
	import CustomNavBar from '@/components/CustomNavBar/CustomNavBar.vue';
	export default {
		components: {
			CustomNavBar
		},
		data() {
			return {
				showDropdown: false,
				triggerPosition: { top: 0, left: 0 }, // 动态菜单位置
								arrowPosition: 0, // 箭头位置
				list:[
	        { label: 'ERC20-USDC', value: 'erc20_usdc' },
	        { label: 'BSC-USDC', value: 'bsc_usdc' },
	        { label: 'ERC20-USDT', value: 'erc20_usdt' },
	        { label: 'BSC-USDT', value: 'bsc_usdt' }
	      ],
		  				// 新增：分别记录两个触发元素的位置
		  				triggerRect1: null,
		  				triggerRect2: null,
		  				// 新增：记录当前激活的下拉类型
		  				activeDropdown: 0, // 0:无, 1:网络, 2:语言
		  activeType: 0, // 新增：记录当前激活的下拉类型
		  // 菜单宽度（单位rpx）
		  menuWidth: 250,
		  // 最大高度（单位rpx）
		  maxHeight: 500,
		  modelValue: '',
		  imgList:[
			  '/static/footImg/001.png',
			  '/static/footImg/002.png',
			  '/static/footImg/003.png',
			  '/static/footImg/004.png',
			  '/static/footImg/005.png',
			  '/static/footImg/006.png',
			  '/static/footImg/007.png',
			  '/static/footImg/008.png',
			  '/static/footImg/009.png',
			  '/static/footImg/010.png',
			  '/static/footImg/011.png',
			  '/static/footImg/012.png',
			  '/static/footImg/013.png',
			  '/static/footImg/014.png',
			  '/static/footImg/015.png',
			  '/static/footImg/016.png',
			  '/static/footImg/017.png',
			  '/static/footImg/018.png',
			  '/static/footImg/019.png',
			  '/static/footImg/020.png',
			  '/static/footImg/021.png',
			  '/static/footImg/022.png',
			  '/static/footImg/023.png',
			  '/static/footImg/024.png',
			  '/static/footImg/025.png',
			  '/static/footImg/026.png',
			  '/static/footImg/027.png',
			  '/static/footImg/028.png',
			  '/static/footImg/029.png',
			  '/static/footImg/030.png',
			  '/static/footImg/031.png',
			  '/static/footImg/032.png',
			  '/static/footImg/033.png',
			  '/static/footImg/034.png',
			  '/static/footImg/035.png',
			  '/static/footImg/036.png',
			  '/static/footImg/037.png',
			  '/static/footImg/038.png',
			  '/static/footImg/039.png',
			  '/static/footImg/040.png',
		  ]
			}
		},
		methods: {
			/* 展开气泡 */
			async toggleDropdown(type) {
						  if (this.showDropdown) {
						    this.closeDropdown();
						    return;
						  }
						  
						  // 获取触发元素位置
						  const rect = await this.getTriggerRect(type);
						  
						  // 计算菜单位置
						  const screen = uni.getSystemInfoSync();
						  const menuWidthPx = uni.upx2px(this.menuWidth);
						  
						  // 计算菜单位置（居中于触发元素）
						  let menuLeft = rect.left + rect.width / 2 - menuWidthPx / 2;
						  
						  // 确保不超出屏幕
						  menuLeft = Math.max(10, Math.min(menuLeft, screen.windowWidth - menuWidthPx - 10));
						  
						  // 计算箭头位置（相对于菜单）
						  const arrowPosition = rect.left + rect.width / 2 - menuLeft - 10;
						  
						  // 更新位置数据
						  this.triggerPosition = {
						    top: rect.bottom,
						    left: menuLeft
						  };
						  
						  this.arrowPosition = arrowPosition;
						  this.showDropdown = true;
						  
						  console.log('菜单位置:', menuLeft, '箭头位置:', arrowPosition);
						},
			selectItem(item) {
			  if (item.disabled) return
			  this.closeDropdown()
			},
			getTriggerRect(type) {
			  return new Promise(resolve => {
			    const query = uni.createSelectorQuery().in(this)
			    query.select(type==1?'#networkAddress':'#language').boundingClientRect(data => {
			      resolve(data)
			    }).exec()
			  })
			},
			closeDropdown() {
			  this.showDropdown = false
			},
		},
		computed: {
			menuStyle() {
						  // 根据当前激活的下拉类型获取对应的位置数据
						  const rect = this.activeDropdown === 1 ? this.triggerRect1 : 
						                this.activeDropdown === 2 ? this.triggerRect2 : null;
						  
						  if (!rect) return {};
						  
						  const screen = uni.getSystemInfoSync();
						  const menuWidth = uni.upx2px(this.menuWidth);
						  
						  // 计算菜单位置
						  let left = rect.left + rect.width / 2 - menuWidth / 2;
						  
						  // 确保不超出屏幕
						  left = Math.max(10, Math.min(left, screen.windowWidth - menuWidth - 10));
						  
						  return {
						    width: menuWidth + 'px',
						    maxHeight: uni.upx2px(this.maxHeight) + 'px',
						    top: rect.bottom + 'px',
						    left: left + 'px',
						    position: 'fixed'
						  }
						},
						
						arrowStyle() {
						  // 根据当前激活的下拉类型获取对应的位置数据
						  const rect = this.activeDropdown === 1 ? this.triggerRect1 : 
						                this.activeDropdown === 2 ? this.triggerRect2 : null;
						  
						  if (!rect) return {};
						  
						  return {
						    // 箭头定位在菜单顶部中心
						    left: '50%',
						    transform: 'translateX(-50%)'
						  }
						},
			totalNavHeight() {
				const app = getApp();
				// 确保 globalData 存在，提供默认值
				return (app.globalData?.statusBarHeight || 0) + (app.globalData?.navBarHeight || 44);
			}
		},
	}
</script>
<style>
	/* 顶部导航 */
	.custom-navbar {
	  height: 44px; /* 导航栏内容高度 */
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  background-color: #000000;
	  color: #ffffff;
	  z-index: 1000;
	  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}
	.left, .right {
	  padding: 0 15px;
	  display: flex;
	  align-items: center;
	}
	.title {
	  font-size: 15px;
	  /* font-weight: bold; */
	}
	.icon {
	  width: 40rpx;
	  height: 40rpx;
	}
	.icon-left {
	  margin-left: 10rpx;
	}
	.line{
		width: 2rpx;
		height: 50rpx;
		background-color: #ffffff;
		margin: 0 20rpx;
	}
	.image-header{
		width: 50rpx;
		height: 50rpx;
	}
	
	
	
	/* 气泡 */
	.dropdown-menu {
		  background: #fff;
		  border-radius: 8rpx;
		  box-shadow: 0 6rpx 24rpx rgba(0,0,0,0.12);
		  overflow: visible;
		}
	
	.menu-scroll {
	  max-height: 100%;
	}
	.dropdown-arrow {
		  position: absolute;
		  top: -16rpx;
		  width: 0;
		  height: 0;
		  border-left: 16rpx solid transparent;
		  border-right: 16rpx solid transparent;
		  border-bottom: 16rpx solid #fff;
		  filter: drop-shadow(0 -2rpx 1rpx rgba(0,0,0,0.1));
		  z-index: 10000;
		}
	/* 菜单项 */
	.menu-item {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  padding: 20rpx 24rpx;
	  min-height: 80rpx;
	  box-sizing: border-box;
	}
	.item-text {
	  font-size: 28rpx;
	  color: #333;
	}
	.menu-item:active:not(.disabled) {
	  background-color: #f5f7fa;
	}
	
	.menu-item.active {
	  background-color: #f8faff;
	}
	/* 内容 */
	.top-title{
		padding: 0 30rpx;
	}
	.big-title{
		text-align: center;
		font-size: 36px;
		line-height: 100%;
		color: black;	
		padding-top: 50px;	
	}
	.medium-title{
		padding-top: 20px;
		color: black;
		font-size: 20px;
		line-height: 150%;
		text-align: center;
	}
	/* 按钮 */
	.make-money{
		color: #fff;
		background-color: #034481;
		text-align: center;
		width: 140px;
		border-radius: 50px;
		margin-top: 30px;
	}
	.icon-btn{
		color: #fff;
		background-color: #034481;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 140px;
		border-radius: 50px;
		margin-top: 30px;
		padding: 10px 0px;
	}
	/* 图片 */
	.top-oneimg{
		margin-top: 30px;
		width: 100%;
	}
	.top-twoimg{
		width: 80%;
		//sheight: 150rpx;
	}
	.top-threeimg{
		width: 80%;
	}
	.img-txt-center{
		text-align: center;
	}
	.top-twoimg-flex{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.icon-btn-box{
		display: flex;
		justify-content: center;
	}
	.icon-mony{
		width: 20px;
		height: 20px;
	}
	.icon-title{
		margin-left: 5px;
	}
	.work-way{
		font-size: 40px;
		font-weight: bold;
		margin-top: 60px;
		color: black;
		text-align: center;
	}
	.txt{
		text-align: center;
		padding: 20px 30px;
	}
	/* 工作流程 */
	.workflow{
		display: flex;
		padding: 0 30px;
		margin-bottom: 30px;
	}
	.workflow-img{
		width: 40px;
		height: 40px;
		flex-shrink: 0;
		margin-right: 10px;
	}
	.workflow-title{
		margin-bottom: 10px;
		font-size: 18px;
	}
	.remind-txt{
		font-size: 18px;
		color: rgb(92, 92, 92);
		padding: 20rpx 10%;
	}
	.accord-with{
		text-align: center; 
		color: black; 
		font-size: 40px;
	}
	.accord-with-txt{
		font-size: 18px; 
		color: black; 
		margin-top: 10px;
		padding: 20rpx 10%;
	}
	.more{
		background-color: rgb(26, 22, 35); 
		text-align: center; 
		padding-top: 40px; 
		padding-bottom: 20px;
		margin-top: 40rpx;
	}
	.more-title{
		font-size: 30px; 
		color: white;
	}
	.more-txt{
		font-size: 14px; 
		color: white; 
		padding: 10px 30px;
	}
	.foot{
		text-align: center; 
		margin: 20px 0px;
	}
	.foot-btn{
		background: white; 
		font-weight: bold; 
		border: none; 
		color: var(--button-color); 
		padding: 0px 20px;
		width: 160px;
		border-radius: 30px;
	}
	.partners{
		width: 100vw;
		margin: 0 auto;
		padding-top: 3vw;
		background-color: #000;
	}
	.image-container {
	  display: flex;
	  flex-wrap: wrap;
	  align-items: center;
	  gap: 20rpx; 
	  padding: 10px 20px
	}
	
	.image-item {
	  width: calc(18% - 8rpx); /* 5 张一行 */
	   /* 固定高度 */
	  border-radius: 8rpx;
	}
	
</style>